<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="container">
      <div class="container-box">
        <el-button
          type="danger"
          style="margin-bottom: 30px;"
          @click="addEdit('add')"
        >添加工作模式</el-button>
        <el-table :data="list">
          <el-table-column
            label="工作模式编号"
            prop="id"
          ></el-table-column>
          <el-table-column
            label="工作模式"
            prop="name"
          > </el-table-column>
          <el-table-column
            label="类型"
            prop="workPatternTypeDesc"
          ></el-table-column>
          <el-table-column
            label="工作日期"
            prop="workDate"
          ></el-table-column>
          <el-table-column label="工作时间">
            <template v-slot="{ row }">
              <span>{{
                minTime(row.workEndMinute1 - row.workStartMinute1)
              }}小时</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template v-slot="{row}">
              <el-button
                type="text"
                @click="addEdit('edit',row)"
              >编辑</el-button>
              <el-button
                type="text"
                style="color:red;"
                @click="del(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <div class="pageBox">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            :current-page="pageList.page"
            :page-size="pageList.pageSize"
            :page-sizes="pagesizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>

    <!--弹框 -->
    <el-dialog
      :visible.sync="addEditShowDialog"
      :title="title"
      width="700px"
      @close="close"
    >
      <el-tabs
        v-model="workPatternType"
      >
        <el-tab-pane
          v-if="workPatternTypeValue===1"
          label="礼拜制"
          name="1"
        > </el-tab-pane>
        <el-tab-pane
          v-if="workPatternTypeValue===2"
          label="连续制"
          name="2"
        ></el-tab-pane>
        <!-- ******************* -->
        <el-tab-pane
          v-if="workPatternTypeValue===3"
          label="礼拜制"
          name="1"
        > </el-tab-pane>
        <el-tab-pane
          v-if="workPatternTypeValue===3"
          label="连续制"
          name="2"
        ></el-tab-pane>
        <el-form
          ref="form"
          :rules="rules"
          :model="checkList"
          label-width="120px"
        >
          <el-form-item
            label="工作模式名称:"
            prop="name"
          >
            <el-input
              v-model="checkList.name"
              placeholder="请填写工作模式名称"
            ></el-input>
          </el-form-item>
          <!-- 礼拜制 -->
          <el-form-item
            v-if="workPatternType==='1'"
            label="连续工作天数:"
          >
            <div>
              <el-checkbox
                v-model="checkList.monday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周一</el-checkbox>
              <el-checkbox
                v-model="checkList.tuesday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周二</el-checkbox>
              <el-checkbox
                v-model="checkList.wednesday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周三</el-checkbox>
              <el-checkbox
                v-model="checkList.thursday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周四</el-checkbox>
              <el-checkbox
                v-model="checkList.friday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周五</el-checkbox>
              <el-checkbox
                v-model="checkList.saturday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周六</el-checkbox>
              <el-checkbox
                v-model="checkList.sunday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周日</el-checkbox>
            </div>
            <!-- <div >
              上<el-input
                v-model="workDayNum"
                style="width:150px;margin:0 10px"
                placeholder="请输入"
              ><template slot="append">天</template></el-input>

              休<el-input
                v-model="restDayNum"
                style="width:150px;margin:0 10px"
                placeholder="请输入"
              ><template slot="append">天</template></el-input>
            </div> -->
            <div style="color:#ccc">选中为工作时间，未选择为休息时间</div>
          </el-form-item>
          <!-- 连续制 -->
          <el-form-item
            v-else-if="workPatternType==='2'"
            label="连续工作天数:"
            prop="checkDa"
          >
            <!-- <div>
              <el-checkbox
                v-model="checkList.monday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周一</el-checkbox>
              <el-checkbox
                v-model="checkList.tuesday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周二</el-checkbox>
              <el-checkbox
                v-model="checkList.wednesday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周三</el-checkbox>
              <el-checkbox
                v-model="checkList.thursday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周四</el-checkbox>
              <el-checkbox
                v-model="checkList.friday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周五</el-checkbox>
              <el-checkbox
                v-model="checkList.saturday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周六</el-checkbox>
              <el-checkbox
                v-model="checkList.sunday"
                :true-label="1"
                :false-label="2"
                :checked="checkoutList"
                class="check"
              >周日</el-checkbox>
            </div> -->
            <div>
              上<el-input
                v-model="workDayNum"
                style="width:150px;margin:0 10px"
                placeholder="请输入"
              ><template slot="append">天</template></el-input>

              休<el-input
                v-model="restDayNum"
                style="width:150px;margin:0 10px"
                placeholder="请输入"
              ><template slot="append">天</template></el-input>
            </div>
            <div style="color:#ccc">选中为工作时间，未选择为休息时间</div>
          </el-form-item>

          <el-form-item
            label="工作时间："
            prop="timeList"
          >
            <el-time-picker
              v-model="checkList.timeList"
              is-range
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              placeholder="选择时间范围"
              format="HH:mm"
              value-format="HH:mm"
              :default-value="defaultValue"
              @change="changeTime"
            >
            </el-time-picker>
          </el-form-item>
        </el-form>
        <!--按钮 -->
        <el-row
          type="flex"
          justify="center"
        >
          <el-col :span="8">
            <el-button
              type="danger"
              @click="btnSubmit"
            >确认</el-button>
            <el-button @click="close">取消</el-button>
          </el-col>
        </el-row>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import { workHistoryList, addWorkHistory, freightManageDelete, workHistoryInfo, updateWorkHistory } from '@/api/transit'
export default {
  data() {
    return {
      list: [],
      pageList: {
        page: 1,
        pageSize: 10
      },
      pagesizes: [10, 20, 30, 50],
      total: 0,
      type: '',
      addEditShowDialog: false,
      workPatternType: '1',
      defaultValue: [new Date(2016, 9, 10, 9, 0), new Date(2016, 9, 10, 10, 0)],
      checkList: {
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        friday: '0',
        saturday: '0',
        sunday: '0',
        timeList: [],
        name: ''
      },
      workStartMinute1: '',
      workEndMinute1: '',
      workDayNum: '',
      restDayNum: '',
      workPatternTypeValue: '',
      workId: '',
      rules: {
        name: [{ required: true, message: '请输入工作模式名称', trigger: 'blur' }],
        timeList: [{ required: true, message: '请输入工作时间', trigger: 'blur' }],
        checkDa: [{ required: true, message: '请输入工作模式名称', trigger: 'blur' }]

      }
    }
  },
  computed: {
    title() {
      return this.type === 'add' ? '添加工作模式' : '编辑工作模式'
    },
    checkoutList() {
      return this.trueLabel === 1 ? true : null
    }
  },
  created() {
    this.workHistoryList()
  },
  methods: {
    // 获取
    async workHistoryList() {
      const { data } = await workHistoryList(this.pageList)
      this.list = data.items
      this.total = +data.counts
    },
    // 每页条数
    async handleSizeChange(newPagesize) {
      // console.log(newPagesize)
      this.pageList.pageSize = newPagesize
      // const { data } = await workHistoryList(this.pageList)
      // this.formData = data.items
      // this.total = +data.counts
      this.workHistoryList()
    },
    // 当前页数
    async handleCurrentChange(newPage) {
      // console.log(newPage)
      this.pageList.page = newPage
      this.workHistoryList()
      // const { data } = await workHistoryList(this.pageList)
      // this.formData = data.items
      // this.total = +data.counts
    },
    // 分换算时
    minTime(min) {
      let minTime = ''
      const h = Math.floor(min / 60)
      min -= h * 60
      if (min === 0) {
        minTime = h ? h + ':00' : ''
      } else {
        if (min < 10) {
          min = '0' + min
        }
        minTime = (h ? h + ':' : '00:') + (min ? min + '' : '')
      }
      return minTime
    },
    // 时换算分
    hTime(h) {
      const arrminutes = h.split(':')
      if (arrminutes.length === 2) {
        const minutes = parseInt(arrminutes[0]) * 60 + parseInt(arrminutes[1])
        return minutes
      } else {
        return 0
      }
    },
    // 时间
    changeTime(val) {
      // console.log(val)
      this.workStartMinute1 = this.hTime(this.checkList.timeList[0])
      this.workEndMinute1 = this.hTime(this.checkList.timeList[1])
      // console.log(h2, h1)
      // console.log(this.minTime(h2))
    },
    handleClick(val) {
      // console.log(val)
    },
    // 添加/编辑
    addEdit(type, row) {
      this.type = type
      this.addEditShowDialog = true
      this.workPatternTypeValue = 3
      if (type === 'edit') {
        if (row.workPatternType === 1) {
          // 礼拜制
          // console.log(row.workPatternType)
          this.workPatternTypeValue = row.workPatternType
          this.workPatternType = '1'
        } else if (row.workPatternType === 2) {
          // 连续制
          this.workPatternTypeValue = row.workPatternType
          this.workPatternType = '2'
          // this.workPatternTypeValue = 2
        }
        this.$nextTick(async() => {
          this.workId = row.id
          const { data } = await workHistoryInfo(row.id)
          // 名称
          this.checkList.name = data.name
          // 礼拜、连续
          this.workDayNum = data.workDayNum
          this.restDayNum = data.restDayNum
          // 星期
          this.checkList.monday = data.monday
          this.checkList.tuesday = data.tuesday
          this.checkList.wednesday = data.wednesday
          this.checkList.thursday = data.thursday
          this.checkList.friday = data.friday
          this.checkList.saturday = data.saturday
          this.checkList.sunday = data.sunday
          // 时间
          // console.log(this.minTime(data.workStartMinute1), this.minTime(data.workEndMinute1))
          this.checkList.timeList.push(this.minTime(data.workStartMinute1), this.minTime(data.workEndMinute1))
        })
      }
    },
    // 点击确定
    btnSubmit() {
      this.$refs.form.validate(async(isOk) => {
        // console.log(isOk)
        if (isOk) {
          if (this.type === 'add') {
            await addWorkHistory({
              ...this.checkList,
              workPatternType: this.workPatternType,
              workStartMinute1: this.workStartMinute1,
              workEndMinute1: this.workEndMinute1,
              workDayNum: this.workDayNum,
              restDayNum: this.restDayNum
            })
            this.$message.success('添加成功')
            this.workHistoryList()
            this.close()
          } else if (this.type === 'edit') {
            // console.log(123)
            await updateWorkHistory({
              ...this.checkList,
              id: this.workId,
              workPatternType: this.workPatternType,
              workStartMinute1: this.workStartMinute1,
              workEndMinute1: this.workEndMinute1,
              workDayNum: this.workDayNum,
              restDayNum: this.restDayNum
            })
            this.$message.success('编辑成功')
            this.workHistoryList()
            this.close()
          }
        }
      })
    },
    // 删除
    del(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await freightManageDelete(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.workHistoryList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 取消
    close() {
      this.addEditShowDialog = false
      this.checkList = {
        monday: '0',
        tuesday: '0',
        wednesday: '0',
        thursday: '0',
        friday: '0',
        saturday: '0',
        sunday: '0',
        name: '',
        timeList: []
      }
      this.workPatternType = '1'
      this.workStartMinute1 = ''
      this.workEndMinute1 = ''
      this.workDayNum = ''
      this.restDayNum = ''
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/deep/ .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
/deep/ .pagination {
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  /deep/ .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  /deep/ .el-form-item__content {
    height: 40px;
  }
  /deep/ .el-tabs__item {
    font-size: 14px;
  }
  /deep/ .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  /deep/ .el-tabs__active-bar {
    background-color: #e15536;
  }
  /deep/ .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  /deep/ .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
/deep/ .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
/deep/ .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
</style>

<style scoped>
.container {
  padding: 20px;
}
.container-box {
  background-color: #fff;
  padding: 30px;
}
.pageBox {
  margin: 20px 0;
  text-align: center;
}
.check {
  margin: 0 5px;
  padding: 0;
}
</style>
